<template>
    <div><button @click="goBack" class="btn1">RETURN</button>
        <h2 class="title1">Re-edit</h2>

        <form @submit.prevent="updatePost">
            <label htmlFor="title" class="front">Title</label>
            <input type="text" class="txt0" v-model="post.title" required>
            <br>
            <label htmlFor="content" class="front">Content</label>
            <textarea class="txt3" v-model="post.content" required></textarea>
            <br>
            <button type="submit" class="btn">Save</button>
        </form>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            post: {
                title: "",
                content: ""
            }
        };
    },
    mounted() {
        this.getPostData();
    },
    methods: {
        goBack(){
            this.$router.go (-1)
        },
        getPostData() {
            const id = this.$route.params.id;
            axios.get(`/api/posts/${id}`)
                .then(response => {
                    this.post = response.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        updatePost() {
            const id = this.$route.params.id;
            axios.put(`/api/posts/${id}`, this.post)
                .then(response => {
                    console.log(response.data);
                    alert("创建成功")
                    this.$router.replace({path: "/user/postList"});
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
};
</script>
<style>
.title1 {
    margin-top: 145px;
    margin-bottom: 45px;
}

textarea {
    color: #2c3e50;
    font-size: 15px;
    font-weight: bold;
}

.txt3 {
    color: #2c3e50;
    font-size: 15px;
    font-weight: bold;
    margin-right: 25px;
    outline: none;
    border: 2px solid #000000;
    border-radius: 5px;
    background: transparent;
}
</style>